<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div class="container none" id="white_container">
      <img
        src="./img/tree_3.png"
        class="tree animate__animated"
        id="tree_box"
      />
      <!-- 电子账单 -->
      <div class="nl_item animate__animated updownMove" id="nl_box">
        <span class="nl_item_circle">4g</span>
        <p class="text">电子账单</p>
      </div>
      <!-- 线下支付 -->
      <div class="nl_item animate__animated updownMove" id="nl_box2">
        <span class="nl_item_circle">10g</span>
        <p class="text">线下支付</p>
      </div>
      <div class="gj">
        <img src="./img/gj.png" class="animate__animated" id="gj_box" />
      </div>
      <!-- <div class="box_btn_wrap">
            <button id="btn">孔明灯播放</button>
            <button id="btn2" >白天</button>
            <button id="btn3" >重新开始</button>
        </div> -->
    </div>
    <div class="container kml_bg" id="hy_container">
      <div class="wz_wrap">
        <div class="wenzi animate__animated animate__fadeInLeft">
          独在异乡为异客
        </div>
        <div class="wenzi wenzi2 animate__animated animate__fadeInLeft">
          每逢佳节倍思亲
        </div>
      </div>
      <!-- 流星 -->

      <div class="meteor meteor1"></div>
      <div class="meteor meteor2"></div>
      <div class="meteor meteor3"></div>
      <div class="meteor meteor4"></div>
      <div class="meteor meteor5"></div>

      <!-- 孔明灯 -->
      <div class="lamp_warp">
        <img src="./img/kmd.png" class="lamp_item lanternY" />
        <!-- <img src="./img/kmd.png" >
            <img src="./img/kmd.png" > -->
      </div>
    </div>
    <div class="box_btn_wrap">
      <button id="btn">孔明灯播放</button>
      <button id="btn2">白天</button>
      <button id="btn3">重新开始</button>
    </div>
    <script>
      let white_container = document.querySelector("#white_container");
      let hy_container = document.querySelector("#hy_container");
      let tree_box = document.querySelector("#tree_box");
      let gj_box = document.querySelector("#gj_box");
      let nl_box = document.querySelector("#nl_box");
      let nl_box2 = document.querySelector("#nl_box2");
      let btn = document.querySelector("#btn");
      let btn2 = document.querySelector("#btn2");
      let btn3 = document.querySelector("#btn3");
      tree_box.addEventListener("click", function () {
        this.classList.add("animate__headShake");
        gj_box.classList.add(["animate__headShake"]);

        // setTimeout(()=>{
        //   this.classList.remove('animate__headShake');
        //   gj_box.classList.remove(['animate__headShake'])
        // },1000)
      });
      tree_box.addEventListener("animationend", () => {
        tree_box.classList.remove("animate__headShake");
        gj_box.classList.remove(["animate__headShake"]);
      });
      nl_box.addEventListener("click", () => {
        nl_box.classList.remove("updownMove");
        nl_box.classList.add("animate__fadeOutBottomRight");
      });
      nl_box.addEventListener("animationend", () => {
        nl_box.style.display = "none";
        alert("能量收集4g！");
      });
      nl_box2.addEventListener("click", () => {
        nl_box2.classList.remove("updownMove");
        nl_box2.classList.add("animate__fadeOutBottomLeft");
      });
      nl_box2.addEventListener("animationend", () => {
        nl_box2.style.display = "none";
        alert("能量收集完毕10g！");
      });
      btn.addEventListener("click", () => {
        white_container.style.display = "none";
        hy_container.style.display = "block";
      });
      //白天
      btn2.addEventListener("click", () => {
        white_container.style.display = "block";
        hy_container.style.display = "none";
        nl_box.style.display = "block";
        nl_box2.style.display = "block";
      });
      btn3.addEventListener("click", () => {
        window.location.reload();
      });
    </script>
  </body>
</html>
